<template>
  <div class="body">
    <div class="button">
      <el-button
        v-print="{
          id: 'printMe',
          popTitle: ''
        }"
        type="primary"
        icon="el-icon-printer"
        @click="showHandle"
      >打印</el-button>
      <el-button type="primary" icon="el-icon-refresh-left" @click="close">返回列表</el-button>
    </div>
    <div id="printMe">
      <table border="1" width="95%" style="border-collapse: collapse; margin: 20px auto; text-align: center">
        <tr style="height: 50px">
          <td v-if="weldData.cardInfo" colspan="4">
            <el-image
              :src="weldData.cardInfo.logo | imgPath"
              class="image"
              style="height: 90px; width: 300px; margin: 0 auto"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </td>
          <td colspan="13" class="text-size">
            焊缝返修施焊记录及外观检查记录卡
          </td>
          <td colspan="3">
            <div>第1页</div>
            <div style="border-top: 1px solid">共1页</div>
          </td>
        </tr>
        <tr style="height: 80px">
          <td colspan="2">产品名称</td>
          <td v-if="viewShows" colspan="3" class="yellow">
            {{ weldData.name }}
          </td>
          <td v-else colspan="3">
            <el-input v-model="obj.name" placeholder="请输入产品名称" />
          </td>
          <td>产品编号</td>
          <td v-if="viewShows" colspan="2" class="yellow">
            <span v-if="weldData.cardInfo">{{
              weldData.cardInfo.productNum
            }}</span>
          </td>
          <td v-else colspan="2">
            <el-input v-model="obj.productNum" placeholder="请输入产品编号" />
          </td>
          <td colspan="2">焊接工艺编号</td>
          <td v-if="viewShows" colspan="3" class="yellow">
            {{ obj.craftsSerialNumber }}
          </td>
          <td v-else colspan="3">
            <!-- <el-select v-model="obj.craftsSerialNumber" placeholder="请选择">
              <el-option
                v-for="(item, index) in craftsInfoList"
                :key="index"
                :label="item.craftsNumber"
                :value="item.id"
              >
              </el-option>
            </el-select> -->
            <el-input v-model="obj.craftsSerialNumber" placeholder="请输入焊接工艺编号" />
          </td>
          <td>焊接方法</td>
          <td v-if="viewShows" colspan="3" class="yellow">
            <span v-if="weldData.weldingMethodList">
              {{
                weldData.weldingMethodList.map((item) => item.name).join("+")
              }}</span>
          </td>
          <td v-else colspan="3">
            <el-select v-model="obj.weldingMethodId" placeholder="请选择">
              <el-option v-for="(item, index) in methodsList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </td>
          <!-- <td colspan="2">焊接设备</td>
          <td>BSTS</td> -->
        </tr>
        <tr style="height: 20px">
          <td colspan="14">施焊记录</td>
          <td colspan="7">外观检查记录</td>
        </tr>
        <tr style="height: 20px">
          <td rowspan="2" class="green">焊缝编号</td>
          <td rowspan="2" class="green">焊接层道</td>
          <td rowspan="2" class="green">层间温度</td>
          <td rowspan="2" class="green">预热温度</td>
          <td rowspan="2" class="green">焊材</td>
          <td colspan="3">焊接参数</td>
          <td rowspan="2" class="green">保护气体种类</td>
          <td rowspan="2" class="green">保护气体流量</td>
          <td rowspan="2" class="green">焊工代号</td>
          <td rowspan="2" class="green">日期</td>
          <td rowspan="2" class="blue">错边</td>
          <td rowspan="2" class="blue">焊脚高</td>
          <td rowspan="2" class="blue">余高</td>
          <td rowspan="2" class="blue">表面缺陷</td>
          <td rowspan="2" class="blue">日期</td>
          <td rowspan="2" class="blue">检查结果</td>
        </tr>
        <tr>
          <td class="green">电流</td>
          <td class="green">电压</td>
          <td class="green">速度</td>
        </tr>
        <!-- <tr>
          <td>扫码</td>
          <td>手选</td>
          <td class="green">采集</td>
          <td class="green">采集</td>
          <td colspan="3">手选</td>
          <td class="green">采集</td>
          <td class="green">采集</td>
          <td class="green">采集</td>
          <td>手选</td>
          <td class="green">采集</td>
          <td class="green">采集</td>
          <td class="green">采集</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr> -->
        <tr v-for="(item, index) in weldData.weldsOperationRecordList" :key="index">
          <td v-if="item.weldSerialNum">{{ item.weldSerialNum }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.layer">{{ item.layer }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.waterTemp">{{ item.waterTemp }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.temp">{{ item.temp }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.weldMaterial">{{ item.weldMaterial }}</td>
          <td v-else>暂无数据</td>
          <!-- <td>内容</td> -->
          <!-- <td v-else>暂无数据</td> -->
          <!-- <td>内容</td> -->
          <!-- <td v-else>暂无数据</td> -->
          <td v-if="item.current">{{ item.current }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.voltage">{{ item.voltage }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.ssSpeed">{{ item.ssSpeed }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.protectiveGasList">
            {{ item.protectiveGasList.map((item) => item.name).join("+") }}
          </td>
          <td v-else>暂无数据</td>
          <td v-if="item.airFlux">{{ item.airFlux }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.personCode">{{ item.personCode }}</td>
          <td v-else>暂无数据</td>
          <td v-if="item.cjTime">{{ item.cjTime }}</td>
          <td v-else>暂无数据</td>
          <td />
          <td />
          <td />
          <td />
          <td />
          <td />
        </tr>

        <tr v-show="add == 2">
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td />
          <td />
          <td />
          <td />
          <td />
          <td />
        </tr>
        <tr>
          <td colspan="9">
            备注：1、产品焊接试板制备、焊缝返修亦用此表记录；2、如需焊前预热，应在右栏内记录加热方式、预热温度范围、测温方法。
          </td>
          <td colspan="11" style="text-align: left">
            <div style="" class="box">
              <div>预热方法:</div>
              <el-checkbox-group v-model="preheatCheckList">
                <el-checkbox label="氧乙炔火焰加热" />
                <el-checkbox label="红外线加热" />
              </el-checkbox-group>
              <div style="margin-left: 30px">
                预热范围：<input
                  v-model="obj.preheatingScope"
                  type="text"
                  style="
                    width: 200px;
                    border: none;
                    border-bottom: 1px solid;
                    outline: none;
                  "
                >
              </div>
            </div>
            <div style="margin-bottom: 20px" class="box">
              <span>测温方法:</span>
              <el-checkbox-group v-model="thermometryCheckList">
                <el-checkbox label="热电偶" />
                <el-checkbox label="红外线测温仪" />
              </el-checkbox-group>
            </div>
          </td>
        </tr>
      </table>

      <div style="display: flex; justify-content: space-around; margin-top: 20px">
        <div style="display: flex; align-items: center">
          <span>检验员：</span>
          <el-input v-model="obj.inspector" placeholder="请输入内容" style="width: 200px" :class="{ disabled: show }" />
        </div>
        <div style="display: flex; align-items: center">
          <span>日期：</span>
          <el-date-picker v-model="obj.date" type="date" placeholder="选择日期" :class="{ disabled: show }" />
        </div>
      </div>
    </div>
    <el-row v-if="viewShows" class="btn-boxs">
      <el-button class="btn" type="primary" @click="submitHandle">确定</el-button>
      <el-button type="primary" class="btn" @click="close">取消</el-button>
    </el-row>
  </div>
</template>
<script>
import {
  postHandle
} from '@/api'
import {
  mapGetters
} from 'vuex'
export default {
  name: 'WeldsManage',

  props: {
    weldData: {
      typeof: Object,
      default: {}
    },
    viewShow: {
      typeof: Boolean
    },
    id: {
      typeof: String,
      default: ''
    },
    add: {
      typeof: Number
    },
    cardIds: {
      typeof: String,
      default: ''
    }
  },

  data() {
    return {
      viewShows: true,
      show: false,
      preheatCheckList: [],
      thermometryCheckList: [],
      preheatList: [],
      thermometryList: [],
      obj: {
        spaceId: '',
        weldingMethodId: '',
        cardId: '',
        craftsSerialNumber: '',
        name: '',
        productNum: '',
        inspector: '',
        date: '',
        preheatingScope: '',
        preheatingMethodId: '',
        cwMethodId: ''
      },
      craftsInfoList: [],
      methodsList: []
    }
  },

  computed: {
    ...mapGetters(['spaceId'])
  },

  watch: {
    weldData: {
      handler() {
        if (this.weldData.weldsOperationRecordList.length == 0) {
          this.weldData.weldsOperationRecordList.push({})
        }
        this.obj.inspector = this.weldData.inspector
        this.obj.date = this.weldData.ct
        this.obj.name = this.weldData.name
        this.obj.productNum = this.weldData.productNum
        this.obj.craftsSerialNumber = this.weldData.craftsSerialNumber
        this.obj.weldingMethodId = this.weldData.weldingMethodId
        this.obj.preheatingScope = this.weldData.preheatingScope
        if (this.weldData.preheatingMethodList) {
          this.preheatCheckList = this.weldData.preheatingMethodList.map(
            (item) => {
              return item.name
            }
          )
        }
        if (this.weldData.cwMethodList) {
          this.thermometryCheckList = this.weldData.cwMethodList.map((item) => {
            return item.name
          })
        }
      }
    },
    viewShow(value) {
      this.viewShows = value
    }
  },

  created() {
    this.getData()
  },

  methods: {
    showHandle() {
      (this.show = true),
      setTimeout(() => {
        this.show = false
      }, 500)
    },
    getData() {
      const params1 = {
        d: {
          filters: [{
            field: 'pdCode',
            operator: 'EQUALS',
            value: 'weldingMethod'
          },
          {
            field: 'st',
            operator: 'NE',
            value: 9
          }
          ],
          page: {
            p: 1,
            ps: 9999
          },
          retOnlySt: false,
          sorts: [{
            field: 'ct',
            isDesc: true
          }]
        }
      }
      const params2 = {
        d: {
          filters: [{
            field: 'pdCode',
            operator: 'EQUALS',
            value: 'YRMethod'
          },
          {
            field: 'st',
            operator: 'NE',
            value: 9
          }
          ],
          page: {
            p: 1,
            ps: 9999
          },
          retOnlySt: false,
          sorts: [{
            field: 'ct',
            isDesc: true
          }]
        }
      }
      const params3 = {
        d: {
          filters: [{
            field: 'pdCode',
            operator: 'EQUALS',
            value: 'cwMethod'
          },
          {
            field: 'st',
            operator: 'NE',
            value: 9
          }
          ],
          page: {
            p: 1,
            ps: 9999
          },
          retOnlySt: false,
          sorts: [{
            field: 'ct',
            isDesc: true
          }]
        }
      }

      postHandle('/api/v1/welder-sbtx-second/dictionary', params1).then((res) => {
        this.methodsList = res.result
      })
      // 预热请求
      postHandle('/api/v1/welder-sbtx-second/dictionary', params2).then((res) => {
        this.preheatList = res.result
      })
      // 测温请求
      postHandle('/api/v1/welder-sbtx-second/dictionary', params3).then((res) => {
        this.thermometryList = res.result
      })
    },
    submitHandle() {
      let arr = []
      let arry = []
      if (this.cardIds) {
        this.obj.cardId = this.cardIds
        console.log(this.cardIds)
      }
      this.obj.spaceId = this.spaceId
      for (let i = 0; i < this.preheatCheckList.length; i++) {
        for (let j = 0; j < this.preheatList.length; j++) {
          if (this.preheatCheckList[i] == this.preheatList[j].name) {
            arr.push(this.preheatList[j].id)
          }
        }
      }
      for (let i = 0; i < this.thermometryCheckList.length; i++) {
        for (let j = 0; j < this.thermometryList.length; j++) {
          if (this.thermometryCheckList[i] == this.thermometryList[j].name) {
            arry.push(this.thermometryList[j].id)
          }
        }
      }
      this.obj.preheatingMethodId = arr.join(',')
      this.obj.cwMethodId = arry.join(',')
      const params = {
        d: {},
        obj: this.obj
      }
      // 提交判断修改和添加
      if (this.add === 2) {
        // 添加
        postHandle(
          '/api/v1/welder-sbtx-second/welds-record-basic-info-comb/create',
          params
        )
          .then((res) => {
            this.$emit('closeshow')
            this.$message.success('添加成功')
          })
      } else {
        // 修改
        postHandle(
          '/api/v1/welder-sbtx-second/welds-record-basic-info-comb/update/' + this.id,
          params
        )
          .then((res) => {
            this.$emit('closeshow')
            this.$message.success('修改成功')
          })
          .catch((res) => {
            this.$message.error('修改失败')
          })
      }
    },
    close() {
      this.$emit('closepop')
    }
  }
}
</script>

<style lang="scss" scoped>
  .body {
    background: #ffffff;
    height: 100%;
    padding-top: 40px;
  }

  .el-button--primary {
    float: right;
    margin-right: 50px;
  }

  table td {
    height: 50px;
  }

  .button {
    display: flex;
    justify-content: end;
  }

  // .yellow {
  //   background: #ffff00;
  // }
  // .green {
  //   background: #99ff99;
  // }
  // .blue {
  //   background: #cc99ff;
  // }
  ::v-deep .disabled .el-input__inner {
    border: none;
  }

  .el-checkbox__input {
    margin-left: 10px;
  }

  .el-input--medium {
    width: 80%;
  }

  .btn-boxs {
    display: flex;
    justify-content: center;
    margin-top: 200px;

    .btn {
      width: 100px;
      height: 40px;
    }
  }

  .text-size {
    font-size: 25px;
    letter-spacing: 10px;
    font-weight: 550;
    height: 80px;
    position: relative;
  }

  .box {
    margin-left: 30px;
    display: flex;
    margin-top: 20px;
  }

  .el-image {
    display: block !important;
  }
</style>
